import { defineStore } from 'pinia'
import defaultSettings from '@/settings'
import { reactive, toRefs } from 'vue'

export const useSettingStore = defineStore(
  'setting',
  () => {
    const { showSettings, sidebarLogo, accordionStyle } = defaultSettings
    // state
    const settings = reactive({ showSettings, sidebarLogo, accordionStyle })
    //action
    const setSetting = ({ key, value }) => {
      // eslint-disable-next-line no-prototype-builtins
      if (settings.hasOwnProperty(key)) {
        settings[key].value = value
      }
    }
    return { ...toRefs(settings), setSetting }
  },
  {
    persist: true
  }
)
